<template>
  <Drawer>
    <BaseForm />
  </Drawer>
</template>
<script lang="tsx" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useVbenForm } from '#/adapter/form';

// 定义 emit 类型
interface Emit {
  (e: 'ok-event', data: any): void;
}
const emit = defineEmits<Emit>();
// 创建 emit 函数
const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false, // 不显示操作按钮
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  fieldMappingTime: [['rangePicker', ['startTime', 'endTime'], 'YYYY-MM-DD']],
  // 提交函数
  handleSubmit: onSubmit,
  layout: 'vertical',
  schema: [
    {
      component: 'Input',
      fieldName: 'username',
      label: $t('sys.role.roleName'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        clearable: true,
      },
      fieldName: 'api',
      label: $t('sys.role.sort'),
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'apiTree',
      label: $t('sys.role.roleValue'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'apiTree1',
      label: $t('sys.role.defaultRouter'),
      rules: 'required',
    },
    {
      component: 'RadioGroup',
      defaultValue: '1',
      componentProps: {
        isButton: true,
        options: [
          {
            label: $t('sys.role.start'),
            value: '1',
          },
          {
            label: $t('sys.role.stop'),
            value: '2',
          },
        ],
      },
      fieldName: 'radioGroup',
      label: $t('sys.role.status'),
    },
    {
      component: 'Input',
      fieldName: 'apiTree3',
      label: $t('sys.role.remark'),
    },
  ],
  // 大屏一行显示1个，中屏一行显示1个，小屏一行显示1个
  wrapperClass: 'grid-cols-1',
});

// 传递数据
function onSubmit(values: Record<string, any>) {
  // console.log(values);
  // eslint-disable-next-line vue/custom-event-name-casing
  emit('ok-event', { message: values });
}
const [Drawer] = useVbenDrawer({
  // 表单校验
  async onConfirm() {
    // 提交表单
    baseFormApi.validateAndSubmitForm();
  },
  // title: '动态修改配置示例',
  // destroyOnClose: true, // 摧毁弹窗配置
});
</script>
